<template>
<div class="wrap">
  <div class="top">
    <div class="logo">
      <img :src="logoImg" alt="">
    </div>
    <div class="menu" @click="handleShow" v-show='!menuShow'>
      <img :src="menuImg" alt="">
    </div>
  </div>
  <div class="mask" v-if='menuShow' @click="closeMask()">
    <div class="logo2">
      <img :src="logoImg2" alt="" >
    </div>
    <ul class="menu">
      <li class="menu-item">
        <router-link to='/' tag='div' @click.native="closeMask">首页</router-link>
      </li>
      <li class="menu-item">
        <router-link to='/partner' tag='div' @click.native="closeMask">合伙人</router-link>
      </li>
      <li class="menu-item">
        <router-link to='/download' tag='div' @click.native="closeMask">下载</router-link>
      </li>
      <li class="menu-item">
        <router-link to='/newsList' tag='div' @click.native="closeMask">媒体报道</router-link>
      </li>
      <li class="menu-item">
        <router-link to='/about' tag='div' @click.native="closeMask">关于我们</router-link>
      </li>
      <li class="menu-item">
        <router-link to='/join' tag='div' @click.native="closeMask">招聘信息</router-link>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'IndexHeader',
  data () {
    return {
      logoImg: require('@/assets/img/index/logo.png'),
      logoImg2: require('@/assets/img/index/logo-2.png'),
      menuImg: require('@/assets/img/index/menu.png'),
      menuShow: false

    }
  },
  watch: {
    '$route': function (to, from) {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  },
  methods: {
    handleShow () {
      this.menuShow = true
    },
    closeMask () {
      this.menuShow = false
    }
  }

}
</script>

<style scoped lang='scss'>
.top{
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 50px;
  box-sizing: border-box;
  width: 750px;
  height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  background: #fff;
  overflow: hidden;
  .logo,.menu{
    padding: 0 40px;
  }
  .logo img{
    width: 287px;
    height: 33px;
  }
  .menu img{
    width: 40px;
    height: 36px;
  }
}
.mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.74);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 10px;

  .logo2{
    width: 170px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 99px;
      height: 52px;
    }
  }
  .menu{
    width: 170px;
    .menu-item{
      display: flex;
      justify-content: center;
      line-height: 52px;
      width: 160px;
      height: 52px;
      background: #ffffff;
      font-size: 24px;
      color: #232323;
      border-radius: 26px;
      margin-bottom: 10px;
    }
  }

}

</style>
